<template>
  <!-- 问卷列表 -->
  <div style="width: 90%; margin: auto">
    <div class="top" style="margin-bottom: 5vh">
      <span style="font-size: 2rem; font-weight: 600">问卷列表</span>
      <!-- 搜索框，可输入关键字搜索问卷名 -->
      <n-input
        v-model:value="r"
        size="large"
        round
        @keypress.enter="search1"
        placeholder="请输入问卷名进行搜索"
        style="float: right"
      >
        <template #suffix>
          <button
            style="border-style: none; background: white; cursor: pointer"
            @click="search1"
          >
            <n-icon depth="1" size="27"><search /></n-icon>
          </button>
        </template>
      </n-input>
      <!-- 排序方式选择 -->
      <n-select
        class="select1"
        v-model:value="value"
        @update:value="select1"
        :options="options"
        style="float: right"
      />
      <!-- 问卷状态选择 -->
      <n-select
        class="select2"
        v-model:value="value2"
        :options="options2"
        style="float: right"
      />
    </div>
    <!-- 问卷列表 -->
    <n-spin :show="!isReady">
      <div class="q-list-box" v-for="item in qList" :key="item.questionnaireId">
        <!-- r2为搜索框的关键词 -->
        <div v-if="item.title.search(r2) >= 0">
          <!-- 状态选择为全部 -->
          <!-- value2为状态标志值 -->
          <question v-if="value2 == '1'" :item="item" @dele="dele" @copy="copy">
          </question>
          <!-- 状态选择为已发布 -->
          <question
            v-else-if="value2 == '2' && item.qstatus == 1"
            :item="item"
            @dele="dele"
            @copy="copy"
          >
          </question>
          <!-- 状态选择为未发布 -->
          <question
            v-else-if="value2 == '3' && item.qstatus == 0"
            :item="item"
            @dele="dele"
            @copy="copy"
          >
          </question>
        </div>
      </div>
      <div v-if="!qList || qList.length === 0">
        <n-empty description="列表为空" size="large" style="margin-top: 15vh">
        </n-empty>
      </div>
    </n-spin>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  computed,
  watch,
  reactive,
  onMounted,
  getCurrentInstance,
} from 'vue';
import { Search } from '@vicons/ionicons5';
import Question from '../components/QuestionBox.vue';
import { Ques } from '@api/question';
let qList = reactive([]);

// 是否就绪
const isReady = ref(false);
onMounted(() => {
  qList.splice(0, qList.length);
  Ques.getQList().then((res: any) => {
    console.log(res.data);
    isReady.value = true;
    if (res.data.status == 200) {
      console.log('成功了');
      for (var i = 0; i < res.data.data.length; i++) {
        qList.push(res.data.data[i]);
      }
      qList.sort((a, b) => {
        return (
          (new Date(b.createdTime) as any) - (new Date(a.createdTime) as any)
        );
      });
    } else if (res.data.status == 400) {
    } else {
      window.$message.error('出错了，请联系管理员');
    }
  });
});

const select1 = (va: any) => {
  // 1:创建时间倒序
  // 2:创建时间正序
  // 3:发布时间倒序
  // 4:发布时间正序
  // 5:答卷数量倒序
  // 6:答卷数量正序
  if (va == 1) {
    qList.sort((a, b) => {
      return (
        (new Date(b.createdTime) as any) - (new Date(a.createdTime) as any)
      );
    });
  } else if (va == 2) {
    qList.sort((a, b) => {
      return (
        (new Date(a.createdTime) as any) - (new Date(b.createdTime) as any)
      );
    });
  } else if (va == 3) {
    qList.sort((a, b) => {
      if (a.qstatus == 0) {
        return -1;
      } else if (b.qstatus == 0) {
        return 1;
      } else {
        return (
          (new Date(b.lastOpenTime) as any) - (new Date(a.lastOpenTime) as any)
        );
      }
    });
  } else if (va == 4) {
    qList.sort((a, b) => {
      if (a.qstatus == 0) {
        return 1;
      } else if (b.qstatus == 0) {
        return -1;
      } else {
        return (
          (new Date(a.lastOpenTime) as any) - (new Date(b.lastOpenTime) as any)
        );
      }
    });
  } else if (va == 5) {
    qList.sort((a, b) => {
      return b.amount - a.amount;
    });
  } else if (va == 6) {
    qList.sort((a, b) => {
      return a.amount - b.amount;
    });
  }
};
const value = ref('1');
//排序方式列表
const options = [
  {
    label: '创建时间倒序',
    value: '1',
  },
  {
    label: '创建时间正序',
    value: '2',
  },
  {
    label: '发布时间倒序',
    value: '3',
  },
  {
    label: '发布时间正序',
    value: '4',
  },
  {
    label: '答卷数量倒序',
    value: '5',
  },
  {
    label: '答卷数量正序',
    value: '6',
  },
];
const value2 = ref('1');
//问卷发布状态列表
const options2: any = [
  {
    label: '全部',
    value: '1',
  },
  {
    label: '已发布',
    value: '2',
  },
  {
    label: '未发布',
    value: '3',
  },
];
//r绑定搜索框
const r = ref('');
//和r同值，确保按了搜索按钮才搜索，而不是r值更新了就搜索
const r2 = ref('');
const search1 = () => {
  r2.value = r.value;
};
const copy = (q: any) => {
  window.$message.success('复制成功');
  qList.push(q);
  select1(value.value);
};
const dele = (id: Number) => {
  window.$message.success('删除成功');
  for (var i = 0; i < qList.length; i++) {
    if (qList[i].questionnaireId == id) {
      qList.splice(i, 1);
    }
  }
};
</script>

<style scoped lang="scss">
.n-select.select1 {
  width: 14%;
  margin: 1vh;
}
.n-select.select2 {
  width: 7%;
  margin: 1vh;
}
.n-input {
  width: 20%;
  margin-top: 5px;
  vertical-align: middle;
}
.q-list-box {
  border-radius: 5px;
  background: #fdfdfd;
  box-shadow: 3px 3px 10px #e4e4e4, -3px -3px 10px #dbdbdb;
  margin-bottom: 2vh;
}
</style>
